<template>
  <div>
    <van-nav-bar
      title="分类"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-tabs v-model="active" @change="tabchange">
      <van-tab
        :title="item.name"
        v-for="(item, index) in navList"
        :key="index"
      ></van-tab>
    </van-tabs>
    <div class="title" v-if="deliteObj.currentNav">
      <h5>{{ deliteObj.currentNav.name }}</h5>
      <span>{{ deliteObj.currentNav.front_name }}</span>
    </div>
    <van-loading type="spinner" color="#1989fa" v-if="!deliteObj.data"/>
    <van-grid :border="false" :column-num="2" v-else>
      <van-grid-item v-for="(item,index) in deliteObj.data" :key="index" @click="jump(item)">
        <van-image :src="item.list_pic_url" />
        <p>{{item.name}}</p>
        <i style="color:red">￥{{item.retail_price}}</i>
      </van-grid-item>
    </van-grid>
  </div>
</template>
<script>
export default {
  data() {
    return {
      navList: [], // 导航栏的数据
      active: 0,
      deliteObj: {}, // 详情的数据存放
    };
  },
  created() {
    let id = this.$route.params.id;
    // console.log(id);
    this.$axios
      .get(`http://shop.bufantec.com/bufan/category/categoryNav?id=${id}`)
      .then((res) => {
        this.navList = res.data.navData;
        this.active = this.navList.findIndex((item) => item.id == id);
      });

    this.init(id);
  },
  methods: {
    init(val) {
      // 请求分类详情的数据函数
      this.$axios
        .get(`http://shop.bufantec.com/bufan/goods/goodsList?categoryId=${val}`)
        .then((res) => {
          //   console.log(res);
          this.deliteObj = res.data;
        });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    tabchange(val){ // tab 切换的事件
      this.init(this.navList[val].id);
       console.log(val);
    },
    jump(val){
      this.$router.push(`/delite/${val.id}`)
    }
  },
};
</script>
<style lang="scss" scoped>
.title {
  height: 50px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  h5 {
    width: 100%;
  }
  span {
    font-size: 12px;
  }
}
</style>